import React from 'react'
import { Route, Switch, Link,Redirect } from 'react-router-dom';
import './Content.css';
import Detail from './Detail';
import Home from './Home';
import {useAuth} from './Context'

const Api = () => {
    return <h1>Api</h1>
}
const New = ({match}) => {
    return (
        <div>
            <h1>新手入门</h1>
            <div>
                <Link to={`${match.url}/login}`} >Login</Link>
                {/* <Link to='/new/login' >Login</Link> */}
                <Link to={`${match.url}/api}`} >API</Link>
                {/* <Link to='/new/api' >API</Link> */}
            </div>
            <div>
                <Switch>
                    {/* <Route path='/new/login' component={Login}/> */}
                    <Route to={`${match.path}/login`} component={Login}></Route>
                    <Route to={`${match.path}/api`} component={Api}></Route>
                    <Redirect to={`${match.path}/login`} />
                    {/* <Route path='/new/api' component={Api} /> */}
                </Switch>
            </div>
        </div>
    )
}
const Collect = () => {
    return <h1>收藏页面</h1>
}
const User = () => {
    return <h1>个人中心</h1>
}
const Login = (props) => {
    const {setIsLogin} = useAuth();
    // console.log(setIsLogin);
    const login = ()=>{
        setIsLogin(true);
        localStorage.setItem('isLogin',true);
        // props.history.replace('/');//回归首页
        props.history.replace(props.location.state || '/');
    }
    return <div>
        <button onClick={login}>登录</button>
    </div>
}
const PrivateRoute = ({component:Com,...rest})=>{

    return <Route {...rest} render={({location})=>{
        // console.log(location);
        const userinfo = localStorage.getItem('isLogin');
        if(userinfo){
            return <Com />
        }else{
            return <Redirect to={{
                pathname:'/login',
                state:location.pathname
            }}/>
        }

    }}/>
}
const Content = () => {
    return (
        <div className='content-wrap'>
            <div className='content'>
                <div className='content-left'>
                    <Switch>
                        {/* exact为精确匹配：有/的时候，只显示Home，不显示News */}
                        <Route exact path='/' component={Home}></Route>
                        <Route path='/home' component={Home}></Route>
                        {/* <Route exact path='/'>
                            <Home />
                        </Route> */}

                        <Route path='/new' component={New}></Route>
                        <Route path='/api' component={Api} ></Route>
                        <PrivateRoute path='/collect' component={Collect} />
                        <PrivateRoute path='/user' component={User} /> 

                        {/* <PrivateRoute path='/user' component={User} /> */}

                        {/* 逻辑封装在PrivateRoute中 */}
                        {/* <Route path='/a' render={()=>{}} ></Route>
                        <Route path='/b' render={()=>{}} ></Route> */}

                        {/* <PrivateRoute path='/collect' component={Collect} />
                        <Route path='/user' render={()=>{
                            return <User />
                        }}/> */}

                        <Route path='/login' component={Login} ></Route>
                        <Route path='/detail/:id' component={Detail} ></Route>
                    </Switch>
                </div>
                <div className='content-right'></div>
            </div>
        </div>
    )
}

export default Content


